<template>
  <div class="g-home-wrap">
    <section class="form-box">
      <p class="g-border" >
        <span>商户端订单编号：</span>
        <input type="text" v-model="obj.orderId">
      </p>
      <p class="g-border" >
        <span>商户ID：</span>
        <input type="text" v-model="obj.merchantNo">
      </p>
      <p class="g-border">
        <span>接入方式：</span>
        <input type="text" v-model="obj.accessType" placeholder="0:api   1:h5">
      </p>
      <p class="g-border">
        <span>跳转方式：</span>
        <input type="text" v-model="obj.jumpType" placeholder="0:pc   1:wap">
      </p>
      <p class="g-border">
        <span>截止时间</span>
        <input type="number" placeholder="yyyy-MM-dd HH:mm:ss" v-model="obj.availabTime">
      </p>
      <p class="g-border">
        <span>金额（单位：分）</span>
        <input type="text"  placeholder="单位：分" v-model="obj.orderAmount"/>
      </p>
      <p class="g-border">
        <span>商品名称</span>
        <input type="text" placeholder="不超过50个字符" v-model="obj.goodsName"/> 
      </p>
      <p class="g-border">
        <span>异步通知地址</span>
        <input type="text" placeholder="http、https" v-model="obj.notifyUrl"/> 
      </p>
      <p class="btn-box">
        <button class="button" :class="{'on':btnText=='txuedai'}" @click="btnFn('txuedai')">A测试环境</button>
        <button class="button" :class="{'on':btnText=='tcardpay'}" @click="btnFn('tcardpay')">B测试环境</button>
        <button class="button" :class="{'on':btnText=='xuedai'}"  @click="btnFn('xuedai')">生产环境</button>
      </p>
    </section>
    <section class="g-btn-box">
      <button @click="mockApply">跳转链接，到订单页</button>
    </section>
    <section v-if="imgURl" class="img-box" @click.self="imgURl =''">
      <img :src="imgURl" alt="">
    </section>
  </div>
</template>
<script>
import api from '$api';
import {getFormateDate} from '$Gfn';
export default {
  data() {
    return {
      async : false,
      obj : {
        accessType :'1',
        availabTime :72,
        goodsName :"上天透透风",
        jumpType  :'0',
        merchantNo :'LB627289413',
        notifyUrl:'http://pay.sanhao.com/labi.php',
        orderAmount :'4000',
        orderId :'orderId-'+((Math.random()+'').substring(2))
      },
      btnText:'txuedai',
      imgURl :''
    }
  },
  methods: {
    //获取订单详情
    mockApply () {
      this.obj.orderTime = getFormateDate('1');
      api.mockApply(this.obj,this.btnText).then((res)=>{
        if(res.code == 1){
          if(this.obj.accessType =='0'){
            this.imgURl = res.data;
          } else{
            location.href = res.data;
          }
        } else {
          alert(res.message)
        }
      })
    },
    btnFn (name) {
      this.btnText =name;
    }
  }
}
</script>
<style lang="scss" scoped>
.g-home-wrap {
  padding:0 15px 30px;
  max-width: 500px;
  margin:0px auto 0;
  background: #fff;
  position: relative;
  .form-box{
    p{
      height: 50px;
      display: flex;
      align-items: center;
      span{
        width: 120px;
      }
      input{
        height: 100%;
        flex:1;
        border:0;
        text-align: right;
      }
      .button{
        background: #f0f0f0;
        display: block;
        flex:1;
        border:none;
        margin:0 10px;
        height: 100%;
        border-radius: 4px;
        &.on{
          background: $col-blue;
          color:#fff;
        }
      }
    }
    .btn-box{
      padding-top:20px;
      height: 70px;
    }
  }
  .img-box{
    position: absolute;
    top:0;
    left: 0;
    bottom: 0;
    right: 0;
    background:rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    img{
      display: block;
      margin:0 auto;
      width: 80%;
    }
  }
}
</style>
